/**
 * Created by hao.cheng on 2017/4/13.
 */
import React, { Component } from 'react';
import { Menu, Icon, Layout, Avatar, Dropdown } from 'antd';
import { connect } from 'react-redux';
const { Header } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
import { MenuActions } from '../../actions'
import styles from './header.less'

class CustomHeader extends Component {
  state = {
    user: '',
    visible: false,
  };
  componentDidMount() { }
  screenFull = () => { }
  menuClick = e => {
    e.key === 'logout' && this.logout();
  };
  logout = () => {
    localStorage.removeItem('user');
    this.props.router.push('/login')
  };
  popoverHide = () => {
    this.setState({
      visible: false,
    });
  };
  handleVisibleChange = (visible) => {
    this.setState({ visible });
  };
  toggleMenu() {
    const { toggleCollapsed } = MenuActions
    const { collapsed, dispatch } = this.props
    dispatch(toggleCollapsed(!collapsed))
  }
  render() {
    const { collapsed } = this.props
    const menu = (
      <Menu selectedKeys={[]} >
        <Menu.Item>
          <Icon type="user" />个人中心
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">
          <Icon type="logout" />退出登录
        </Menu.Item>
      </Menu>
    );
    return (
      <Header style={{ padding: 0 }} >
        <div className={styles.custom_header}>
          <Icon
            className={`trigger ${styles.custom_trigger}`}
            type={collapsed ? 'menu-unfold' : 'menu-fold'}
            onClick={this.toggleMenu.bind(this)}
          />
          <div className={styles.header_menu_right}>
            <Dropdown overlay={menu}>
              <span className={styles.action}>
                <Avatar size="small" className={styles.avatr} src={require('../../../images/b1.jpg')} />
                <span >hahha</span>
              </span>
            </Dropdown>
          </div>
        </div>

      </Header>
    )
  }
}

const mapStateToProps = state => {
  const { collapsed } = state.MenuState
  return {
    collapsed
  }
};

export default connect(mapStateToProps)(CustomHeader);
